<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>药品管理系统 - 登录</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .login-container {
            width: 400px;
            padding: 40px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }
        .login-title {
            text-align: center;
            font-size: 28px;
            color: #409EFF;
            margin-bottom: 30px;
            font-weight: bold;
        }
        .login-form {
            width: 100%;
        }
        .login-button {
            width: 100%;
            height: 45px;
            font-size: 16px;
            margin-top: 10px;
        }
        .login-logo {
            text-align: center;
            margin-bottom: 25px;
        }
        .logo {
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg, #409EFF, #67C23A);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 32px;
            font-weight: bold;
        }
        .register-link {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
            color: #606266;
        }
        .register-link a {
            color: #409EFF;
            text-decoration: none;
            font-weight: 500;
        }
        .register-link a:hover {
            text-decoration: underline;
        }
        .el-input__inner {
            height: 45px;
        }
        .system-info {
            text-align: center;
            margin-top: 30px;
            color: #909399;
            font-size: 12px;
        }
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
    </style>
</head>
<body>
<div id="login-app">
    <div class="login-container">
        <div v-if="loading" class="loading-overlay">
            <i class="el-icon-loading" style="font-size: 30px; color: #409EFF;"></i>
        </div>

        <div class="login-logo">
            <div class="logo">药</div>
        </div>
        <h2 class="login-title">药品管理系统</h2>

        <el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="login-form">
            <el-form-item prop="username">
                <el-input
                        v-model="loginForm.username"
                        placeholder="用户名"
                        prefix-icon="el-icon-user"
                        size="medium"
                        @keyup.enter.native="handleLogin"
                        clearable>
                </el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input
                        v-model="loginForm.password"
                        type="password"
                        placeholder="密码"
                        prefix-icon="el-icon-lock"
                        show-password
                        size="medium"
                        @keyup.enter.native="handleLogin"
                        clearable>
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button
                        type="primary"
                        class="login-button"
                        @click="handleLogin"
                        :loading="loading"
                        :disabled="loading">
                    {{ loading ? '登录中...' : '登录' }}
                </el-button>
            </el-form-item>
        </el-form>

        <div class="register-link">
            没有账号？<a href="register.html">立即注册</a>
        </div>

        <div class="system-info">
            © 2023 药品管理系统 - 技术支持
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#login-app',
        data() {
            return {
                loginForm: {
                    username: '',
                    password: ''
                },
                loginRules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                    ]
                },
                loading: false
            };
        },
        mounted() {
            // 检查是否已登录，如果已登录则跳转到主页
            this.checkLoginStatus();
        },
        methods: {
            // 检查登录状态
            checkLoginStatus() {
                const savedUser = localStorage.getItem('currentUser');
                if (savedUser) {
                    try {
                        const user = JSON.parse(savedUser);
                        // 验证token是否有效
                        axios.get('/pms/user/current')
                            .then(response => {
                                if (response.data.success) {
                                    window.location.href = 'index.html';
                                } else {
                                    localStorage.removeItem('currentUser');
                                }
                            })
                            .catch(() => {
                                localStorage.removeItem('currentUser');
                            });
                    } catch (e) {
                        localStorage.removeItem('currentUser');
                    }
                }
            },

            // 处理登录
            handleLogin() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;

                        // 创建表单数据
                        const formData = new FormData();
                        formData.append('username', this.loginForm.username);
                        formData.append('password', this.loginForm.password);

                        // 发送登录请求
                        axios.post('/pms/user/login', formData, {
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            transformRequest: [function (data) {
                                let params = new URLSearchParams();
                                params.append('username', data.get('username'));
                                params.append('password', data.get('password'));
                                return params;
                            }]
                        })
                            .then(response => {
                                this.loading = false;

                                if (response.data.success) {
                                    this.$message({
                                        message: response.data.message,
                                        type: 'success',
                                        duration: 1500
                                    });

                                    // 保存用户信息到本地存储
                                    localStorage.setItem('currentUser', JSON.stringify(response.data.data));

                                    // 跳转到主页
                                    setTimeout(() => {
                                        window.location.href = 'index.html';
                                    }, 1500);
                                } else {
                                    this.$message.error(response.data.message);
                                }
                            })
                            .catch(error => {
                                this.loading = false;
                                console.error('登录失败:', error);

                                if (error.response && error.response.data) {
                                    this.$message.error(error.response.data.message || '登录失败');
                                } else {
                                    this.$message.error('登录失败，请检查网络连接');
                                }
                            });
                    } else {
                        return false;
                    }
                });
            }
        }
    });
</script>
</body>
</html>